<template>
  <div class="box-hd clearfix">
    <h2 class="title">家电</h2>
    <div class="more">
      <ul class="tab-list">
        <li :class="isActive ? 'tab-active' : ''" @mouseover="showOne">热门</li>
        <li :class="isActive0 ? 'tab-active' : ''" @mouseover="showTwo">电影影音</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'Top',
  computed :{
    ...mapState(['isActive_Bottom','isActive','isActive0'])
  },
  data(){
    return{
      // isActive: true,
      // isActive0: false
    }
  },
  methods: {
    // showOne(){
    //   this.isActive = true
    //   this.isActive0 = false
    //   this.isActive_Bottom = true
    // },
    // showTwo(){
    //   this.isActive = false
    //   this.isActive0 = true
    //   this.isActive_Bottom = false
    //   // console.log('i am right',this.isActive_Bottom);
    // },
    ...mapMutations(['showOne','showTwo'])
  }
}
</script>

<style lang="less" scoped>
.box-hd {
  position: relative;
  height: 58px;
  -webkit-font-smoothing: antialiased;
  .title {
    margin: 0;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
    color: #333;
  }
  .more {
    position: absolute;
    top: 0;
    right: 0;

    .tab-list {
      margin: 0;
      padding: 16px 0 0;
      list-style-type: none;
      font-size: 16px;
      display: flex;
      li.tab-active,.tab-list li:hover {
        color: #ff6700;
        border-bottom: 2px solid #ff6700;
      }
      li{
        display: inline-block;
        margin: 0 0 0 30px;
        cursor: pointer;
        -webkit-transition: border .3s;
        transition: border .3s;
      }
    }
  }
}

</style>